<template>
  <div class="body_">
    <!--    <el-tabs v-model="activeName" @tab-click="handleClick">-->
    <!--      <el-tab-pane label="数据统计" name="first">-->
    <div class="header">
      <div class="TitleForm">
        <el-form ref="TitleForm" :model="TitleForm" label-width="120px" inline>
          <el-form-item label="输入名称" prop="name">
            <el-input
              placeholder="请输入名称或编码"
              v-model="TitleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="TitleForm.state" placeholder="请选择信息">
              <el-option label="正常" value="1"></el-option>
              <el-option label="异常" value="2"></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="选择日期">-->
          <!--            <el-date-picker-->
          <!--              v-model="TitleForm.time"-->
          <!--              type="date"-->
          <!--              placeholder="请选创建时间"-->
          <!--            >-->
          <!--            </el-date-picker>-->
          <!--          </el-form-item>-->
        </el-form>
        <div class="queryBtn">
          <el-button type="primary" @click="Select(true)" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            type="primary"
            @click="resetSearchForm('TitleForm')"
            icon="el-icon-refresh-left"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="main">
      <div class="tableBtn">
        <el-button type="primary" icon="el-icon-plus" @click="Add"
          >新增</el-button
        >
      </div>
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column :index="indexAdd" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="uniq_code" label="设备编号" width="280">
        </el-table-column>
        <!--        <el-table-column prop="name" label="设备序列号" width="180">-->
        <!--        </el-table-column>-->
        <el-table-column prop="name" label="设备名称"> </el-table-column>
        <el-table-column prop="status" label="设备状态"> </el-table-column>
        <!--        <el-table-column prop="address" label="所在区域"> </el-table-column>-->
        <!--        <el-table-column prop="createtime" label="创建时间"> </el-table-column>-->
        <el-table-column prop="lamp_name" label="所属灯杆"> </el-table-column>
        <!--        <el-table-column prop="address" label="IP地址及端口号">-->
        <!--        </el-table-column>-->
        <!--        <el-table-column prop="address" label="设备描述"> </el-table-column>-->
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <span @click="EditDevice(scope.row)" class="operter">编辑</span>
            <span @click="DeleteDevice(scope.row)" class="operter">删除 </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <div class="Dialog_">
      <el-dialog
        width="30%"
        title="选择地图位置"
        :visible.sync="MapDialog"
        append-to-body
      >
        <Map @LatLng="LatLng" :initGetLatAndLng_="true" />
      </el-dialog>
      <el-dialog
        :title="DialogTitle"
        :visible.sync="AddDialogFormVisible"
        center
        width="30%"
        @close="CloseAddDialog"
      >
        <div class="AddFromBox">
          <el-form :model="AddForm" :rules="rules" ref="AddForm">
            <el-form-item label="设备编号" label-width="120px" prop="uniq_code">
              <el-input
                v-model="AddForm.uniq_code"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="设备名称" label-width="120px" prop="name">
              <el-input v-model="AddForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="所属灯杆" label-width="120px" prop="lamp_id">
              <el-select v-model="AddForm.lamp_id">
                <el-option
                  v-for="item in lampoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="lampChange(item)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在区域" label-width="120px" prop="address">
              <el-input v-model="AddForm.address" autocomplete="off"></el-input>
              <el-button
                class="SelectL"
                type="primary"
                @click="MapDialog = true"
                >选择位置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="AddDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="SubmitFrom">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js";
import Map from "@/components/Map.vue";
import {
  addDeviceMonitor,
  DeleteDeviceMonitor,
  EditDeviceMonitor,
  GetDeviceMonitorList,
} from "@/api/dashboard"; // 权限判断指令
import { LampallList } from "@/api/LED";
export default {
  components: {
    Map,
  },
  directives: { permission },
  mounted() {
    this.GetAllLampOptions();
    this.Select();
  },
  data() {
    return {
      isAdd: true,
      EditQuery: {},
      DialogTitle: "",
      lampoptions: [],
      MapDialog: false,
      // 新增弹窗
      AddDialogFormVisible: false,
      AddForm: {
        uniq_code: "",
        name: "",
        address: "",
        lamp_id: "",
      },
      activeName: "first",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      rules: {
        uniq_code: [{ required: true, message: "请输入名称", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        lamp_id: [
          { required: true, message: "请选择所属灯杆", trigger: "blur" },
        ],
        address: [{ required: true, message: "请选择位置", trigger: "blur" }],
      },
      TitleForm: {
        name: "",
        state: "",
      },
    };
  },
  methods: {
    // 获取所有灯杆
    GetAllLampOptions() {
      LampallList().then((response) => {
        response.data.forEach((e) => {
          let item = {
            label: e.name,
            value: e.id,
            lng: e.longitude,
            lat: e.latitude,
          };
          this.lampoptions.push(item);
        });
      });
    },
    lampChange(item) {
      this.AddForm.address = item.lng + "," + item.lat;
    },
    async Select(type) {
      if (type) {
        this.currentPage = 1;
      }
      let { data: res } = await GetDeviceMonitorList({
        page: this.currentPage,
        status: this.TitleForm.state,
        name: this.TitleForm.name,
      });
      this.tableData = [];
      this.total = Number(res.total);
      console.log(res);
      res.list.forEach((e) => {
        let item = {
          id: e.id,
          name: e.name,
          image: e.ip,
          lamp_id: e.lamp_id,
          longitude: e.longitude,
          latitude: e.latitude,
          uniq_code: e.uniq_code,
          lasttime: e.lasttime,
          createtime: e.createtime,
          lamp_name: e.lamp_name,
        };
        if (e.status == 1) {
          item.status = "启用";
        } else {
          item.status = "未启用";
        }
        this.tableData.push(item);
      });
    },

    // 新增
    Add() {
      this.isAdd = true;
      this.DialogTitle = "新增监控设备";
      this.AddDialogFormVisible = true;
    },
    // 修改
    EditDevice(row) {
      this.isAdd = false;
      let that = this;
      this.DialogTitle = "修改监控设备";
      this.AddDialogFormVisible = true;
      this.$nextTick(() => {
        this.AddForm = {
          name: row.name,
          uniq_code: row.uniq_code,
          address: row.longitude + "," + row.latitude,
        };
      });
      this.lampoptions.forEach((e) => {
        if (e.value == row.lamp_id) {
          this.$nextTick(() => {
            that.AddForm.lamp_id = row.lamp_id;
          });
        }
      });
      let query = {
        name: this.AddForm.name,
        lamp_id: this.AddForm.lamp_id,
      };
      query.id = row.id;
      this.EditQuery = query;
    },
    // 提交信息
    SubmitFrom(type) {
      this.$refs["AddForm"].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            let query = {
              name: this.AddForm.name,
              lamp_id: this.AddForm.lamp_id,
              uniq_code: this.AddForm.uniq_code,
            };
            if (this.AddForm.address.indexOf(",") !== -1) {
              query.longitude = this.AddForm.address.split(",")[0];
              query.latitude = this.AddForm.address.split(",")[1];
            }

            addDeviceMonitor(query).then((res) => {
              if (res.code === 1) {
                this.$message("新增成功");
                this.Select(true);
                this.AddDialogFormVisible = false;
                this.resetSearchForm("AddForm");
              }
            });
            //   新增
          } else {
            //   编辑
            let query = {
              name: this.AddForm.name,
              lamp_id: this.AddForm.lamp_id,
              uniq_code: this.AddForm.uniq_code,
              id: this.EditQuery.id,
            };
            if (this.AddForm.address.indexOf(",") !== -1) {
              query.longitude = this.AddForm.address.split(",")[0];
              query.latitude = this.AddForm.address.split(",")[1];
            }
            EditDeviceMonitor(query).then((res) => {
              if (res.code === 1) {
                this.$message("修改成功");
                this.Select(true);
                this.AddDialogFormVisible = false;
                this.resetSearchForm("AddForm");
              }
            });
          }
        }
      });
    },
    CloseAddDialog() {
      this.$refs["AddForm"].resetFields();
      this.EditQuery = {};
    },
    //   删除
    DeleteDevice(row) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteDeviceMonitor({ id: row.id }).then((res) => {
            if (res.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.Select(true);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(tab, event) {},
    handleSizeChange(e) {
      this.pageSize = e;
      // this.Select(false);
    },
    handleCurrentChange(e) {
      this.currentPage = e;
      // this.Select(false);
    },
    LatLng(latlng) {
      this.AddForm.address = latlng;
      this.MapDialog = false;
    },
    // 序号递增
    indexAdd(index) {
      return index + this.pageSize * (this.currentPage - 1) + 1;
    },
    // 重置搜索From
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.Select(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.body_ {
  overflow: hidden;
  padding-top: 0.2625rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    //height: 0.85rem /* 68/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .main {
    margin-top: 0.3rem /* 24/80 */;
    width: 100%;
    //height: 8.925rem /* 618/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex: 1;
  }
}
.operter {
  color: rgba(59, 140, 255, 1) !important;
  cursor: pointer;
  margin-right: 4px;
}
</style>
